@use "./variables.scss";
@use "./reset.css";
@use "./common.scss";

// 默认使用亮色主题
:root {
  --el-disabled-bg-color: #fff;
  // 主色调
  --primary-color: var(--light-primary-color);
  --success-color: var(--light-success-color);
  --warning-color: var(--light-warning-color);
  --danger-color: var(--light-danger-color);
  --info-color: var(--light-info-color);

  // 背景色
  --bg-color: var(--light-bg-color);
  --bg-color-secondary: var(--light-bg-color-secondary);

  // 文本颜色
  --text-color: var(--light-text-color);
  --text-color-secondary: var(--light-text-color-secondary);
  --text-color-placeholder: var(--light-text-color-placeholder);
  --disabled-color: var(--light-disabled-color);

  // 边框颜色
  --border-color: var(--light-border-color);
  --border-color-light: var(--light-border-color-light);

  // 侧边栏
  --sidebar-bg: var(--light-sidebar-bg);
  --sidebar-text-color: var(--light-sidebar-text-color);
  --sidebar-item-hover: var(--light-sidebar-item-hover);
  --sidebar-item-active: var(--light-sidebar-item-active);

  // 头部导航
  --header-bg: var(--light-header-bg);
  --header-text-color: var(--light-header-text-color);
  --header-item-hover: var(--light-header-item-hover);

  // 卡片
  --card-bg: var(--light-card-bg);
  --card-shadow: var(--light-card-shadow);
  --card-border: var(--light-card-border);

  // 按钮
  --button-bg: var(--light-button-bg);
  --button-text: var(--light-button-text);
  --button-hover: var(--light-button-hover);

  // 阴影
  --box-shadow: var(--light-box-shadow);
  --box-shadow-light: var(--light-box-shadow-light);

  // 删除按钮
  --button-delete-bg: var(--light-button-delete-bg);
  --button-delete-color: var(--light-button-delete-color);
  --button-delete-border: var(--light-button-delete-border);
  --button-delete-hover: var(--light-button-delete-hover);
  --button-delete-focus-bg: var(--light-button-delete-focus-bg);
  --button-delete-focus-color: var(--light-button-delete-focus-color);
  --button-delete-focus-border: var(--light-button-delete-focus-border);

  // 描述背景色
  --desc-bg: var(--light-desc-bg);

  // 当前标签
  --tag-active-bg: var(--light-tag-active-bg);
  --tag-active-border: var(--light-tag-active-border);

  // 标签
  --tag-bg: var(--light-tag-bg);
  --tag-border: var(--light-tag-border);
  --tag-color: var(--light-tag-color);

  // 翻页按钮
  --pagination-btn-bg: var(--light-pagination-btn-bg);
  --pagination-btn-border: var(--light-pagination-btn-border);

  // 表格
  --table-bg: var(--light-table-bg);

  // 表格头部
  --table-header-bg: var(--light-table-header-bg);

  // 统计卡片
  --stat-card-bg: var(--light-stat-card-bg);
  --stat-card-border: var(--light-stat-card-border);

  // 主题切换按钮
  --theme-switch-border: var(--light-theme-switch-border);
  --theme-switch-bg: var(--light-theme-switch-bg);
}

// 暗色主题
[data-theme="dark"] {
  // Element Plus暗色模式适配
  --el-bg-color: var(--dark-bg-color);
  --el-bg-color-overlay: var(--dark-card-bg);
  --el-text-color-primary: var(--dark-text-color);
  --el-text-color-regular: var(--dark-text-color-secondary);
  --el-border-color: var(--dark-border-color);
  --el-border-color-light: var(--dark-border-color);
  --el-border-color-lighter: var(--dark-border-color-light);
  --el-fill-color-blank: var(--dark-bg-color);
  --el-fill-color: var(--dark-bg-color-secondary);
  --el-fill-color-light: var(--dark-sidebar-item-hover);
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

  // 主色调
  --primary-color: var(--dark-primary-color);
  --success-color: var(--dark-success-color);
  --warning-color: var(--dark-warning-color);
  --danger-color: var(--dark-danger-color);
  --info-color: var(--dark-info-color);

  // 背景色
  --bg-color: var(--dark-bg-color);
  --bg-color-secondary: var(--dark-bg-color-secondary);

  // 文本颜色
  --text-color: var(--dark-text-color);
  --text-color-secondary: var(--dark-text-color-secondary);
  --text-color-placeholder: var(--dark-text-color-placeholder);
  --disabled-color: var(--dark-disabled-color);

  // 边框颜色
  --border-color: var(--dark-border-color);
  --border-color-light: var(--dark-border-color-light);

  // 侧边栏
  --sidebar-bg: var(--dark-sidebar-bg);
  --sidebar-text-color: var(--dark-sidebar-text-color);
  --sidebar-item-hover: var(--dark-sidebar-item-hover);
  --sidebar-item-active: var(--dark-sidebar-item-active);

  // 头部导航
  --header-bg: var(--dark-header-bg);
  --header-text-color: var(--dark-header-text-color);
  --header-item-hover: var(--dark-header-item-hover);

  // 卡片
  --card-bg: var(--dark-card-bg);
  --card-shadow: var(--dark-card-shadow);
  --card-border: var(--dark-card-border);

  // 按钮
  --button-bg: var(--dark-button-bg);
  --button-text: var(--dark-button-text);
  --button-hover: var(--dark-button-hover);

  // 阴影
  --box-shadow: var(--dark-box-shadow);
  --box-shadow-light: var(--dark-box-shadow-light);

  // 删除按钮
  --button-delete-bg: var(--dark-button-delete-bg);
  --button-delete-color: var(--dark-button-delete-color);
  --button-delete-border: var(--dark-button-delete-border);
  --button-delete-hover: var(--dark-button-delete-hover);
  --button-delete-focus-bg: var(--dark-button-delete-focus-bg);
  --button-delete-focus-color: var(--dark-button-delete-focus-color);
  --button-delete-focus-border: var(--dark-button-delete-focus-border);

  // 描述背景色
  --desc-bg: var(--dark-desc-bg);

  // 当前标签
  --tag-active-bg: var(--dark-tag-active-bg);
  --tag-active-border: var(--dark-tag-active-border);

  // 标签
  --tag-bg: var(--dark-tag-bg);
  --tag-border: var(--dark-tag-border);
  --tag-color: var(--dark-tag-color);

  // 翻页按钮
  --pagination-btn-bg: var(--dark-pagination-btn-bg);
  --pagination-btn-border: var(--dark-pagination-btn-border);

  // 表格
  --table-bg: var(--dark-table-bg);

  // 表格头部
  --table-header-bg: var(--dark-table-header-bg);

  // 统计卡片
  --stat-card-bg: var(--dark-stat-card-bg);
  --stat-card-border: var(--dark-stat-card-border);

  // 主题切换按钮
  --theme-switch-border: var(--dark-theme-switch-border);
  --theme-switch-bg: var(--dark-theme-switch-bg);
}

// 通用样式
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;

  // 卡片组件样式
  .el-card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: transparent;
    box-shadow: var(--card-shadow);
    transition: all 0.3s;
    border: var(--card-border);
    border-radius: 6px;

    .el-card__header {
      border-bottom-color: var(--border-color-light);
    }
  }

  // 按钮样式优化
  .el-button {
    &:not(.is-text):not(.is-link) {
      &.el-button--default {
        background-color: var(--button-bg);
        color: var(--button-text);
        border-color: var(--border-color);

        &:hover,
        &:focus {
          background-color: var(--button-hover);
          border-color: var(--primary-color);
          color: var(--primary-color);
        }
      }
    }
  }

  // 表格样式优化
  .el-table {
    // background-color: var(--card-bg);
    background-color: var(--table-bg);
    color: var(--text-color);

    &::before {
      display: none; // 移除底部边框
    }

    .el-table__header-wrapper th {
      background-color: var(--bg-color-secondary);
      color: var(--text-color);
    }

    .el-table__body-wrapper tr {
      // background-color: var(--card-bg);
      background-color: var(--table-bg);

      &:hover > td {
        background-color: var(--bg-color-secondary);
      }
    }

    // 表格头部
    .el-table__header-wrapper {
      background-color: var(--table-header-bg);
    }

    .el-table__header-wrapper th {
      background-color: var(--table-header-bg);
    }

    .el-table__header-wrapper .el-table__cell {
      background-color: var(--table-header-bg);
    }

    .el-table__row td {
      border-bottom-color: var(--border-color-light);
    }

    .el-table--border .el-table__inner-wrapper::after {
      background-color: var(--border-color-light);
    }

    // 修复暗色模式表格样式
    .el-table__border-left-patch,
    .el-table__border-top-patch {
      background-color: transparent;
    }
  }

  // 输入框样式优化
  .el-input {
    .el-input__wrapper {
      background-color: var(--bg-color);
      box-shadow: 0 0 0 1px var(--border-color) inset;

      .el-input__inner {
        color: var(--text-color);

        &::placeholder {
          color: var(--text-color-placeholder);
        }
      }

      &.is-focus {
        box-shadow: 0 0 0 1px var(--primary-color) inset;
      }
    }
  }

  // 下拉菜单样式优化
  .el-dropdown-menu {
    background-color: var(--card-bg);
    border-color: transparent;
    box-shadow: var(--box-shadow);

    .el-dropdown-menu__item {
      color: var(--text-color);

      &:hover {
        background-color: var(--bg-color-secondary);
        color: var(--primary-color);
      }
    }
  }

  // 弹窗样式优化
  .el-dialog {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;

    .el-dialog__header {
      border-bottom: 1px solid var(--border-color-light);
      margin-right: 0;

      .el-dialog__title {
        color: var(--text-color);
      }
    }

    .el-dialog__body {
      color: var(--text-color);
    }

    .el-dialog__headerbtn {
      &:hover .el-dialog__close {
        color: var(--primary-color);
      }
    }
  }

  // 分页组件样式优化
  .el-pagination {
    button,
    .btn-prev,
    .btn-next {
      // background-color: var(--bg-color);
      background-color: var(--pagination-btn-bg) !important;
      border-color: var(--pagination-btn-border) !important;
      border-radius: 3px !important;

      &:disabled {
        background-color: var(--bg-color);
        color: var(--disabled-color);
      }
    }

    // 翻页按钮
    // .btn-prev, .btn-next {
    //   background-color: var(--pagination-btn-bg) !important;
    //   border-color: var(--pagination-btn-border) !important;
    // }

    .el-pager li {
      // background-color: var(--bg-color);
      // color: var(--text-color);
      background-color: var(--pagination-btn-bg) !important;
      border-color: var(--pagination-btn-border) !important;

      &.is-active {
        color: var(--primary-color);
        background-color: var(--primary-color) !important;
      }

      &:hover {
        color: var(--primary-color);
      }
    }
  }

  // 修复图标颜色问题
  .el-icon {
    color: currentColor;
    fill: currentColor;

    svg {
      color: inherit;
      fill: currentColor;
    }
  }

  .el-select {
    width: 150px;
  }

  // 修复选择器样式
  .el-select-dropdown {
    background-color: var(--card-bg);
    border: none;
    box-shadow: var(--box-shadow);
  }

  // 修复日期选择器
  .el-picker__popper {
    background-color: var(--card-bg) !important;
    border: none !important;
    box-shadow: var(--box-shadow) !important;

    .el-date-picker__header-label,
    .el-date-table th {
      color: var(--text-color);
    }

    .el-date-table td.available:hover {
      color: var(--primary-color);
    }
  }

  // 修复Switch组件
  .el-switch__core {
    .el-switch__inner {
      color: var(--text-color);
    }
  }

  // 修复标签样式
  .el-tag {
    border: none;

    &.el-tag--info {
      background-color: var(--bg-color-secondary);
      color: var(--text-color);
    }
  }

  .el-tag.el-tag--warning {
    background: rgba(255, 165, 0, 0.16);
    border: 1px solid #e6a23c;
    border-radius: 4px;
  }

  .el-tag.el-tag--success {
    background: rgba(36, 212, 77, 0.16);
    border: 1px solid rgba(95, 229, 143, 1);
    border-radius: 4px;
  }

  .el-tag.el-tag--danger {
    background: rgba(212, 36, 36, 0.16);
    border: 1px solid rgba(229, 95, 95, 1);
    border-radius: 4px;
  }

  // 修复菜单样式和图标
  .el-menu {
    .el-menu-item,
    .el-sub-menu__title {
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: inherit;

        svg {
          color: inherit;
          fill: currentColor;
        }
      }
    }

    .el-sub-menu.is-active {
      & > .el-sub-menu__title {
        color: #ffffff; //var(--primary-color);

        .el-icon {
          color: #ffffff; //var(--primary-color);
        }
      }
    }
  }
}

// 修复暗黑模式下图标可见性问题
[data-theme="dark"] {
  .el-icon {
    color: inherit;
    fill: currentColor;

    svg {
      color: inherit;
      fill: currentColor;
    }
  }

  // .el-menu-item.is-active,
  // .el-sub-menu.is-active>.el-sub-menu__title {
  //   .el-icon {
  //     color: var(--primary-color);

  //     svg {
  //       color: var(--primary-color);
  //       fill: var(--primary-color);
  //     }
  //   }
  // }

  // 修复上传组件在暗黑模式下的样式
  .el-upload-dragger {
    background-color: var(--bg-color-secondary);
    border-color: var(--border-color);

    &:hover {
      border-color: var(--primary-color);
    }

    .el-icon {
      color: var(--text-color-secondary);
    }

    .el-upload__text {
      color: var(--text-color);

      em {
        color: var(--primary-color);
      }
    }
  }

  .el-upload__tip {
    color: var(--text-color-secondary);
  }

  // 修复代码块在暗黑模式下的显示
  pre,
  code {
    // background-color: var(--bg-color-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
  }

  // 修复Tab标签在暗黑模式下的样式
  .el-tabs__header {
    background-color: var(--card-bg);

    .el-tabs__item {
      color: var(--text-color-secondary);

      &.is-active {
        color: var(--primary-color);
      }

      &:hover {
        color: var(--primary-color);
      }
    }

    .el-tabs__active-bar {
      background-color: var(--primary-color);
    }
  }
}
// 提示框优化
.el-tooltip {
  width: 40%;
  max-height: 400px;
  padding-bottom: 20px;
  & > span:first-child {
    display: inline-block;
    width: 100%;
    max-height: 390px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.el-select__popper {
  width: auto;
}
.mb10 {
  margin-bottom: 10px;
}